<template>
	<!-- 积分商城 -->
	<view class="integral-index-wrapper">
		<view class="integral-msg">
			<image src="/packageMemberIntegral/packageMemberIntegral/static/images/icon/integral-bg.png" class="bg"></image>
			<view class="my-integral">
				<view class="number-box">
					<view class="text">{{i18n.myIntegral}}</view>
					<view class="number">{{scoreInfo.score}}</view>
				</view>
				<view class="det" @tap="navigateTo" data-path="scoreDet">{{i18n.detailed}}
					<image src="/static/images/icon/white-arr.png"></image>
				</view>
			</view>
			<view class="make" @tap="navigateTo" data-path="scoreIndex">
				<image src="/static/images/icon/make-integral.png"></image>{{i18n.earnPoints}}
			</view>
		</view>
		<view class="integral-list">
			<view class="member-tit">
				<view class="text">{{i18n.pointsExchange}}</view>
			</view>
			<view class="con-box">
				<block v-for="(prod, prodId) in scoreProdList" :key="prodId">
					<goodsitem :prod="prod" @tap="toScoreProdDet" :data-scoreprodid="prod.prodId"></goodsitem>
				</block>
			</view>
			<view class="loadall" v-if="scoreProdList.length > 10 && loadAll">{{i18n.endTips}}</view>
			<view class="empty" v-if="!scoreProdList.length">{{i18n.noData}}</view>
		</view>
	</view>
</template>

<script>
	// pages/integralIndex/integralIndex.js
	var http = require("../../../utils/http.js");
	import goodsitem from "../../components/IntegralGoodsList/IntegralGoodsList.vue";

	export default {
		data() {
			return {
				current: 1,
				size: 20,
				scoreProdList: [],
				scoreInfo: "",
				pages: "",
				loadAll: false, // 已加载全部
			};
		},

		components: {
			goodsitem
		},

		computed: {
			i18n() {
				return this.$t('index')
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.getScoreProdList();
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			// 获取当前积分信息
			this.getScoreInfo();
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			if (this.current < this.pages) {
				this.current = this.current + 1
				this.getScoreProdList()
			} else {
				this.setData({
					loadAll: true
				})
			}
		},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			/**
			 * 跳转
			 */
			navigateTo(e) {
				const path = e.currentTarget.dataset.path;

				if (path == 'scoreDet') {
					uni.navigateTo({
						url: '/packageMemberIntegral/pages/integralDetail/integralDetail'
					});
				} else if (path == 'scoreIndex') {
					uni.navigateTo({
						url: '/packageMemberIntegral/pages/memberIndex/memberIndex'
					});
				}
			},

			/**
			 * 获取当前积分信息
			 */
			getScoreInfo() {
				var params = {
					url: '/p/score/scoreInfo',
					method: 'GET',
					data: {},
					callBack: res => {
						this.setData({
							scoreInfo: res
						});
					}
				};
				http.request(params);
			},

			/**
			 * 获取积分商品列表
			 */
			getScoreProdList() {
				var param = {
					url: "/p/score/prodScorePage",
					method: "GET",
					data: {
						current: this.current,
						size: this.size,
					},
					callBack: res => {
						uni.hideLoading()
						var scoreProdList = [];

						if (this.current == 1) {
							this.setData({
								scoreProdList: res.records,
								pages: res.pages,
								current: res.current
							});
						} else {
							scoreProdList = this.scoreProdList;
							scoreProdList.push(...res.records);
							this.setData({
								scoreProdList
							});
						}
					}
				};
				http.request(param);
			},

			/**
			 * 跳转积分商品详情
			 */
			toScoreProdDet(e) {
				console.log(e);
				const prodId = e.currentTarget.dataset.scoreprodid;
				uni.navigateTo({
					url: '/packageMemberIntegral/pages/convertProdDet/convertProdDet?prodId=' + prodId
				});
			}

		}
	};
</script>
<style lang="scss">
	/* 积分中心 */

	@import "../memberIndex/memberIndex.css";

	page {
		background: #f6f7f9;
	}

	.integral-index-wrapper {
		position: relative;

		.integral-msg {
			width: 750rpx;
			height: 290rpx;
			position: relative;

			.bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}

			.my-integral {
				display: flex;
				padding: 90rpx 30rpx 0;
				color: #fff;
				position: relative;
				align-items: center;

				.number-box {
					.text {
						font-size: 24rpx;
					}

					.number {
						font-size: 90rpx;
						font-family: arial;
						margin-top: 10rpx;
					}
				}

				.det {
					font-size: 24rpx;
					margin-left: 20rpx;
					margin-top: 76rpx;
					display: flex;
					align-items: center;

					image {
						width: 12rpx;
						height: 20rpx;
						margin-left: 10rpx;
						padding-top: 4rpx;
					}
				}
			}

			.make {
				position: absolute;
				right: 30rpx;
				bottom: 70rpx;
				padding: 6rpx 12rpx 6rpx 6rpx;
				background: #fff;
				color: #ee3f0f;
				font-size: 24rpx;
				height: 42rpx;
				line-height: 42rpx;
				border-radius: 54rpx;
				display: flex;

				image {
					width: 42rpx;
					height: 42rpx;
					vertical-align: top;
					margin: 0 8rpx 0 4rpx;
				}
			}
		}

		/* 积分中心 */

		/* 加载完成 */
		.loadall {
			margin: 20rpx 0;
			line-height: 2em;
			font-size: 28rpx;
			color: #aaa;
			text-align: center;
		}

		/* 空 */
		.empty {
			display: block;
			height: 200rpx;
			line-height: 200rpx;
			font-size: 30rpx;
			color: #888;
			text-align: center;
		}
	}
</style>
